<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-组件通信父传子-props的驼峰标识</title>
</head>

<body>
    <div id="app">
        <!-- <cpn v-bind:cinfo='info'></cpn>
        <cpn :cinfo='info'></cpn> -->
        <!-- 驼峰标识写法  要用短横线代替  html不区分大小写，-->
        <cpn :c-info='info' :china-my-message="message"></cpn>
        <!-- 未传时，显示默认值 -->
        <cpn :c-info='info' ></cpn>

    </div>
    <template id="cpn">
        <!-- 如果子组件 代码较多，要有一个根元素包起来 -->
        <div>
            <!-- <h2>{{cinfo}}</h2> -->
            <!-- 驼峰写法 -->
            <h2>{{cInfo}}</h2>
            <h2>{{chinaMyMessage}}</h2>
        </div>
    </template>
    <script src="./js/vue.min.js"></script>
    <script>
        const cpn = {
            template: "#cpn",
            data() {
                return {

                }
            },
            props: {
                // cinfo:{
                //     type:Object,
                //     default(){
                //         return{

                //         }
                //     }
                // }

                // 驼峰标识
                cInfo: {
                    type: Object,
                    default () {
                        return {

                        }
                    }
                },
                chinaMyMessage: {
                    type:String,
                    default:'aaa',
                }
            }
        }
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello',
                info: {
                    name: 'qq',
                    age: 18,
                    height: 156
                }
            },
            components: {
                cpn
            }
        })
    </script>
</body>

</html>